<template>
  <a-layout class="bgc-white">
    <!-- <a-main> -->
    <a-row class="p24 btmline">
      <a-col :span="2">
        <a-icon type="left" class="fs20" @click="goback" />
      </a-col>
      <div class="left2" style="cursor:pointer;" @click="goback">返回</div>
    </a-row>
    <a-collapse v-model="activeKey" class="p24" :bordered="false">
      <a-collapse-panel key="1" header="工资卡信息">
        <a-col :span="12" class="border-r-line">
          <a-table :columns="table" :data-source="data1" row-key="enName" :pagination="false">
            <span slot="action" slot-scope="text, record">
              <a-checkbox :checked="record.unique == 1" @change="watch(record, 'unique')" />
            </span>
            <span slot="open">
              <a-checkbox default-checked disabled />
            </span>
          </a-table>
        </a-col>
        <a-col :span="12" class="border-r-line">
          <a-table :columns="table" :data-source="data11" row-key="enName" :pagination="false">
            <span slot="action" slot-scope="text, record">
              <a-checkbox :checked="record.unique == 1" @change="watch(record, 'unique')" />
            </span>
            <span slot="open">
              <a-checkbox default-checked disabled />
            </span>
          </a-table>
        </a-col>
      </a-collapse-panel>
    </a-collapse>
    <!-- </a-main> -->
  </a-layout>
</template>

<script>
const table = [
  {
    title: "字段名称",
    dataIndex: "name"
  },
  {
    title: "是否必填",
    dataIndex: "action",
    scopedSlots: { customRender: "action" }
  },
  {
    title: "是否开启",
    dataIndex: "open",
    scopedSlots: { customRender: "open" }
  }
];
const table1 = [
  {
    title: "字段名称",
    dataIndex: "name"
  },
  {
    title: "是否必填",
    dataIndex: "action",
    scopedSlots: { customRender: "action" }
  },
  {
    title: "是否开启",
    dataIndex: "open",
    scopedSlots: { customRender: "open" }
  },
  {
    title: "子项",
    dataIndex: "item",
    scopedSlots: { customRender: "item" }
  }
];
const data1 = [
  {
    enName: "bankCard",
    name: "工资卡卡号"
  },
  {
    enName: "bankPlace",
    name: "工资卡开户城市"
  }
];
const data11 = [
  {
    enName: "bankName",
    name: "银行名称"
  },
  {
    enName: "bankCardBranch",
    name: "工资卡开户支行"
  }
];
import { getEmpInfoRequires, putEmpRequires } from "@/api/staff/entry";
export default {
  data() {
    return {
      activeKey: ["1", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16"],
      companyId: "",
      text: 1,
      table,
      table1,
      data1,
      data11,
      res: {},
      result: {}
    };
  },

  created() {
    // this.defaultSelectedKeys[0] = this.$route.name || "";
    this.companyId = this.$store.state.hr.companyId;
    this.getData();
  },
  methods: {
    getData() {
      getEmpInfoRequires(this.companyId, "entry").then(res => {
        this.res = res.data;
        this.data1 = this.translateData(this.data1);
        this.data11 = this.translateData(this.data11);
      });
    },
    watch(record, type, item) {
      record[type] = record[type] === 1 ? 0 : 1;
      // 必填
      let val = 0;
      if (record.unique === 1) {
        record.open = 1;
        val = 2;
      } else {
        val = record.open;
      }

      if (item) {
        this.result[item] = {
          ...this.result[item],
          [record.enName]: val,
          id: record.id
        };
      } else {
        this.result[record.enName] = val;
      }
    },
    save(data) {
      delete this.res.type;
      delete this.res.tabCard;
      delete this.res.tabCertificate;
      delete this.res.tabContacts;
      delete this.res.tabEducation;
      delete this.res.tabTrain;
      delete this.res.tabWork;

      delete this.res.empCardRequireVO;
      delete this.res.empCertificateRequireVO;
      delete this.res.empContactsRequireVO;
      delete this.res.empEducationRequireVO;
      delete this.res.empTrainRequireVO;
      delete this.res.empWorkRequireVO;

      putEmpRequires({ ...this.res, ...this.result }).then(res => {
        this.$notification["success"]({
          message: "success",
          description: "修改成功"
        });
        this.$router.push({ path: "/staff/edit" });
      });
    },
    transData(data) {
      const array = [];

      let unique, open;
      data.forEach(e => {
        const val = this.res[e.enName];
        // 必填
        if (val === 2) {
          unique = 1;
          open = 1;
        } else {
          unique = 0;
          open = val;
        }
        const listArr = [];
        let a, b;
        if (e.list.length > 0) {
          e.list.forEach(item => {
            const n = this.res[e.listName][item.enName];
            if (n === 2) {
              a = 1;
              b = 1;
            } else {
              a = 0;
              b = n;
            }
            listArr.push({
              ...item,
              unique: a,
              open: b,
              id: this.res[e.listName].id
            });
          });
        }
        array.push({
          ...e,
          unique,
          open,
          list: listArr
        });
      });

      return array;
    },
    translateData(data) {
      const array = [];
      let unique, open;
      data.forEach(e => {
        const val = this.res[e.enName];
        // 必填
        if (val === 2) {
          unique = 1;
          open = 1;
        } else {
          unique = 0;
          open = val;
        }

        array.push({
          ...e,
          unique,
          open
        });
      });

      return array;
    },
    goback() {
      this.$router.push({ path: "/staff/edit" });
    }
  }
};
</script>

<style lang="scss" scoped>
.left2 {
  z-index: 3;
  left: 45px;
  position: absolute;
  color: #595959;
  font-size: 16px;
  margin-top: -3px;
}
.ant-collapse .ant-collapse-item .ant-collapse-header .anticon {
  left: initial;
  right: 16px;
}
.ant-layout {
  background: #fff;
}

.ant-collapse-content {
  padding-bottom: 24px;
}

.ant-collapse-item {
  font-size: 16px;
  color: #252525;
}
</style>
